<hr class="clrBr">
<b><%= ob.polyT('purchase.receipt.summary') %></b>
<%
  const viewingCurrency = ob.currencyMod.getExchangeRate(ob.displayCurrency) !== undefined ?
    ob.displayCurrency : ob.listingCurrency;

  const setTotalTip = tip =>
    `<span class="toolTip clrTAlert" data-tip="${tip}"><span class="ion-alert-circled padSm"></span></span>`;
  let totalTip = '';

  if (viewingCurrency !== ob.listingCurrency) {
    totalTip = setTotalTip(
      ob.polyT('purchase.receipt.totalWarning1', { currency: viewingCurrency })
    );
  } else if (viewingCurrency !== ob.paymentCoin) {
    if (ob.paymentCoin) {
      totalTip = setTotalTip(
        ob.polyT('purchase.receipt.totalWarning2', { currency: ob.paymentCoin })
      );
    } else {
      totalTip = setTotalTip(
        ob.polyT('purchase.receipt.totalWarning2NoCoin')
      );
    }
  }

  ob.prices.forEach((priceObj, i) => {
    // convert the prices here, to prevent rounding errors in the display
    const basePrice = ob.currencyMod.convertCurrency(priceObj.price, ob.listingCurrency, viewingCurrency);
    
    const shippingPrice = ob.currencyMod.convertCurrency(priceObj.sPrice, ob.listingCurrency, viewingCurrency);

    const additionalShippingPrice = ob.currencyMod.convertCurrency(priceObj.aPrice, ob.listingCurrency, viewingCurrency);
    
    const surcharge = ob.currencyMod.convertCurrency(priceObj.vPrice, ob.listingCurrency, viewingCurrency);

    const validQuantity =
      priceObj.quantity && !priceObj.quantity.isNaN() && priceObj.quantity.gt(0);
    
    let quantity = validQuantity ? priceObj.quantity : ob.bigNumber(1);
    
    if (ob.isCrypto) {
      quantity = validQuantity ? priceObj.quantity : ob.bigNumber(0);
    }

    let itemTotal = basePrice.plus(surcharge);
    const preCouponPrice = itemTotal;
    ob.coupons.forEach((coupon) => {
      if (coupon.percentDiscount) {
        itemTotal = itemTotal.minus(
          itemTotal.times(0.01).times(coupon.percentDiscount)
        );
      } else if (coupon.bigPriceDiscount && !coupon.bigPriceDiscount.isNaN()) {
        const convertPriceDiscount =
            ob.currencyMod.convertCurrency(
              coupon.bigPriceDiscount,
              ob.listingCurrency,
              viewingCurrency
            );
        itemTotal = itemTotal.minus(convertPriceDiscount);
      }
    });
    const subTotal = itemTotal.times(quantity);
    const shippingTotal =
      shippingPrice
        .plus(
          additionalShippingPrice
            .times(quantity.minus(1))
        );

    let displayCurCoinDiv;

    try {
      displayCurCoinDiv = ob.getCoinDivisibility(ob.displayCurrency);
    } catch (e) {
      // pass
    }
%>
  <div class="flexRow gutterHSm">
    <span class="flexExpand">
      <% if (!ob.isCrypto) { %>
        <%= ob.polyT('purchase.receipt.listing') %>
      <% } else { %>
        <%= ob.polyT('purchase.receipt.cryptoIconsAmountCombo', {
          icons: ob.crypto.tradingPair({
            className: 'cryptoTradingPairSm cryptoTradingPair',
            fromCur: ob.listing.metadata.acceptedCurrencies[0],
            toCur: ob.listing.metadata.coinType,
            truncateCurAfter: 5,
          }),
          cryptoIconsAmount:
            `<span class="cryptoQuantity">${ob.polyT('purchase.receipt.cryptoIconsAmount',
              { amount: ob.number.toStandardNotation(priceObj.quantity) })}</span>`,
        }) %>

      <% } %>
    </span>
    <div class="constrainedWidth">
      <div class="flexHRight">
        <b>
          <%
            if (!ob.isCrypto) {
              print(ob.currencyMod.formatCurrency(preCouponPrice, viewingCurrency));
            } else {
              print(ob.currencyMod.formatCurrency(subTotal.plus(shippingTotal), viewingCurrency));
            }
          %>
        </b>
      </div>
    </div>
  </div>
  <% ob.coupons.forEach((coupon) => { %>
    <div class="flexRow gutterHSm">
      <span class="flexExpand">
        <%= ob.polyT('purchase.receipt.coupon') %>
      </span>
      <div class="constrainedWidth">
        <div class="flexHRight">
          <b>
            <% if (coupon.percentDiscount) {
                 print(`-${coupon.percentDiscount}%`);
            } else if (coupon.bigPriceDiscount && !coupon.bigPriceDiscount.isNaN()) {
              print(`-${ob.currencyMod.convertAndFormatCurrency(coupon.bigPriceDiscount, ob.listingCurrency, viewingCurrency)}`);
            } %>
          </b>
        </div>
      </div>
    </div>
  <% }); %>

  <% if (ob.listing.shippingOptions && ob.listing.shippingOptions.length && shippingPrice !== additionalShippingPrice && quantity > 1) { %>
  <div class="flexRow gutterHSm">
        <span class="flexExpand">
          <%= ob.polyT('purchase.receipt.shipping') %>
        </span>
  </div>
  <div class="flexRow subShipping gutterHSm">
    <span class="flexExpand">
      <%= ob.polyT('purchase.receipt.firstItem') %>
    </span>
    <div class="constrainedWidth">
      <div class="flexHRight">
        <b>
          <%= ob.currencyMod.formatCurrency(shippingPrice, viewingCurrency) %>
        </b>
      </div>
    </div>
  </div>
  <div class="flexRow subShipping gutterHSm">
    <span class="flexExpand">
      <%= ob.polyT('purchase.receipt.additionalItems') %>
    </span>
    <div class="constrainedWidth">
      <div class="flexHRight">
        <b>
          <%= ob.currencyMod.formatCurrency(additionalShippingPrice, viewingCurrency) %>
        </b>
      </div>
    </div>
  </div>
  <% } else if (ob.listing.shippingOptions && ob.listing.shippingOptions.length) { %>
    <div class="flexRow gutterHSm">
      <span class="flexExpand">
        <%= ob.polyT('purchase.receipt.shipping') %>
      </span>
      <div class="constrainedWidth">
        <div class="flexHRight">      
          <b>
            <%= ob.currencyMod.formatCurrency(shippingPrice, viewingCurrency) %>
          </b>
        </div>
      </div>
    </div>
  <% } %>
  <hr class="clrBr">
  <% if (quantity && quantity.gt(0)) { %>
    <% if (!ob.isCrypto) { %>
      <div class="flexRow gutterHSm">
        <span class="flexExpand">
          <%= ob.polyT('purchase.receipt.subtotal', { quantity: ob.number.toStandardNotation(priceObj.quantity) }) %>
        </span>
        <div class="constrainedWidth">
          <div class="flexHRight">      
            <b>
              <%= ob.currencyMod.formatCurrency(subTotal, viewingCurrency) %>
            </b>
          </div>
        </div>
      </div>
    <% } %>
    <% if (ob.listing.shippingOptions && ob.listing.shippingOptions.length && shippingTotal) { %>
      <div class="flexRow gutterHSm">
        <span class="flexExpand">
          <%= ob.polyT('purchase.receipt.shippingTotal') %>
        </span>
        <div class="constrainedWidth">
          <div class="flexHRight">        
            <b>
              <%= ob.currencyMod.formatCurrency(shippingTotal, viewingCurrency) %>
            </b>
          </div>
        </div>
      </div>
    <% } %>
  <% } %>
  <div class="flexRow">
    <span class="flexExpand">
      <%= ob.polyT('purchase.receipt.total') %><% if (ob.showTotalTip) print(totalTip)%>
    </span>
    <div class="constrainedWidth">
      <div class="flexHRight">
        <b>
          <%= ob.currencyMod.formatCurrency(subTotal.plus(shippingTotal), viewingCurrency) %>
        </b>
      </div>
    </div>
  </div>
<% }); %>
